<template>
  <div class="base_tabs1">
    <div
      v-if="isShowBtn"
      class="left"
      @click="leftSlide"
      :class="{ disabled: leftDisabled }"
    ></div>
    <div class="tabs_wrapper" ref="tabsWrapper">
      <div class="tabs_content">
        <div
          v-for="(item, index) in tabs"
          :key="index"
          :class="[index == selected ? 'tab_selected' : 'tab_normal']"
          @click="tabChange(index, item)"
        >
          <span class="tabs_name">{{ item.label }}</span>
          <span class="tabs_value"> {{ item.value }} </span>
          <span class="tabs_unit">{{ item.unit }}</span>
        </div>
      </div>
    </div>
    <div
      v-if="isShowBtn"
      class="right"
      @click="rightSlide"
      :class="{ disabled: rightDisabled }"
    ></div>
  </div>
</template>

<script>
  export default {
    name: 'baseTabs1',
    props: {
      /**
       * tab数据
       * @param {Array} tabs
       */
      tabs: {
        type: Array,
        default: () => [{ label: '选项卡1' }, { label: '选项卡2' }],
      },
      /**
       * 选中的tab
       * @param {Number} tabSelectedIndex
       */
      tabSelectedIndex: {
        type: Number,
      },
      /**
       * 是否展示滑动按钮
       * @param {Boolean}
       */
      isShowBtn: {
        type: Boolean,
        default: false,
      },
    },
    created() {
      this.selected = this.tabSelectedIndex
    },
    data() {
      return {
        selected: 0,
        timer: null,
        leftDisabled: true,
        rightDisabled: false,
      }
    },
    methods: {
      tabChange(index, item) {
        this.selected = index
        this.$emit('tabChange', index, item)
      },
      leftSlide() {
        let left = this.$refs.tabsWrapper.scrollLeft
        if (left <= 0) {
          this.leftDisabled = true
          return
        }
        this.rightDisabled = false
        let clientWidth = this.$refs.tabsWrapper.clientWidth
        let num = 0
        clearInterval(this.timer)
        this.timer = null
        this.timer = setInterval(() => {
          if (!left || num >= clientWidth - 30) {
            clearInterval(this.timer)
            this.timer = null
            if (left <= 0) {
              this.leftDisabled = true
            }
            return
          }
          this.$refs.tabsWrapper.scrollLeft = left -= 30
          num += 30
        }, 20)
      },
      rightSlide() {
        let left = this.$refs.tabsWrapper.scrollLeft
        let scrollWidth = this.$refs.tabsWrapper.scrollWidth
        let clientWidth = this.$refs.tabsWrapper.clientWidth
        if (left + clientWidth >= scrollWidth) {
          this.rightDisabled = true
          return
        }
        this.leftDisabled = false
        let num = 0
        clearInterval(this.timer)
        this.timer = setInterval(() => {
          if (left + clientWidth >= scrollWidth || num >= clientWidth - 30) {
            clearInterval(this.timer)
            this.timer = null
            if (left + clientWidth >= scrollWidth) {
              this.rightDisabled = true
            }
            return
          }
          this.$refs.tabsWrapper.scrollLeft = left += 30
          num += 30
        }, 20)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .base_tabs1 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 27px;

    .left {
      width: 27px;
      height: 27px;
      background: url('./assets/left.png') no-repeat;
      background-position: center;
      background-size: contain;

      &.disabled:hover {
        cursor: not-allowed;
      }

      &:not(.disabled):hover {
        cursor: pointer;
        background-image: url('./assets/left_active.png');
      }
    }

    .right {
      width: 27px;
      height: 27px;
      background: url('./assets/right.png') no-repeat;
      background-position: center;
      background-size: contain;

      &.disabled:hover {
        cursor: not-allowed;
      }

      &:not(.disabled):hover {
        cursor: pointer;
        background-image: url('./assets/right_active.png');
      }
    }

    .tabs_wrapper {
      position: relative;
      width: calc(100% - 54px);
      height: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;

      .tabs_content {
        position: absolute;
        display: flex;
        align-items: center;

        > div:last-child {
          margin-right: 0;
        }
      }
    }

    .tab_normal,
    .tab_selected {
      flex-shrink: 0;
      height: 27px;
      padding-right: 10px;
      padding-left: 10px;
      margin-right: 12px;
      line-height: 27px;
      text-align: center;
      cursor: pointer;
      user-select: none;

      .tabs_name {
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        color: #fff;
        text-align: center;
        text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
      }

      .tabs_value {
        font-size: 20px;
        font-weight: bold;
        line-height: 24px;
        color: #e99637;
        text-align: center;
        letter-spacing: normal;
      }

      .tabs_unit {
        font-size: 12px;
        font-weight: 500;
        line-height: 12px;
        color: #fff;
        text-align: center;
        letter-spacing: normal;
      }
    }

    .tab_normal {
      background-image: url('./assets/tab_normal.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .tab_selected {
      background-image: url('./assets/tab_selected.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
</style>
